<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
	<!-- 表单提交 -->
	<div style="display: none; padding: 50px 50px" id="type">

		<form class="layui-form" action="" id="dataFrm" lay-filter="dataFrm">
			<div class="layui-input-inline">
				<input type="text" name="type" required lay-verify="required"
					placeholder="请输入视频分类" autocomplete="off" class="layui-input">

				<input type="text" name="id" placeholder="隐藏的id" autocomplete="off"
					class="layui-hide">
			</div>
			<button class="layui-btn" id="sub" lay-submit lay-filter="formDemo1">立即提交</button>
			<button type="reset" class="layui-btn">重置</button>

		</form>

	</div>
	<!--搜索 表单提交 -->
	<form class="layui-form" action="">
		<div class="layui-input-inline">
			<input type="text" name="search" required lay-verify="required"
				placeholder="请输入id或分类" autocomplete="off" class="layui-input">
		</div>
		<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
		<button type="reset" class="layui-btn">重置</button>
	</form>
	<!--搜索 表单提交 结束-->
	<table class="layui-hide" id="idtest" lay-filter="filtertest"></table>

	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
<button class="layui-btn layui-btn-sm" lay-event="add">添加视频分类</button>
<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
  </div>
</script>
	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

	<script>
		layui
				.use(
						[ 'table', 'form', 'layer' ],
						function() {
							var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;

							//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
							//详见：https://www.layui.com/doc/modules/table.html#totalRow
							table.render({
								elem : '#idtest',
								url : '../type.do',
								toolbar : '#toolbarDemo',
								title : '视频分类',

								cols : [ [ {
									type : 'checkbox',
									fixed : 'left'
								}, {
									type : 'numbers',
									fixed : 'left',
									title : '序号',
										
								}, {
									field : 'id',
									title : 'ID',
									width : 300,
									unresize : false,
									sort : true,
									
								}, {
									field : 'type',
									title : '视频分类',
									width : 200,
									
								}, {
									fixed : 'right',
									title : '操作',
									toolbar : '#barDemo',
									width : 150
								} ] ],
								page : true
							});

							//工具栏事件
							table.on('toolbar(filtertest)', function(obj) { //filtertest =>lay-filter
								//table.checkStatus(obj.config.id) 通过id 获取"data":[{"blogid":2, 这个data的值
								var checkStatus = table.checkStatus(obj.config.id);
								//obj.config.id =>获取当前table的id

								switch (obj.event) {
								case 'getCheckData':
									var data = checkStatus.data;
									console.log('checkStatus:'
											+ JSON.stringify(checkStatus));
									console.log('boj.config:'
											+ JSON.stringify(obj.config.id));
									layer.alert(JSON.stringify(data));
									break;
								case 'getCheckLength':
									var data = checkStatus.data;
									layer.msg('选中了：' + data.length + ' 个');
									break;
								case 'isAll':
									layer.msg(checkStatus.isAll ? '全选' : '未全选')
									break;
								case 'add':
									openAdd();
									break;
								case 'refresh':
									reFresh();
									break;
								}
								;
							});
							//添加
							function openAdd() {
								layer.open({

									type : 1,
									title : '添加视频分类',
									content : $("#type"),
									area : [ '400px', '200px' ],
									offset:"100px",
									success : function(res) {
										document.getElementById("dataFrm")
												.reset();
										url = "../type.do?op=add";
										
									}
								
								});

							}
							

							//监听行工具事件
							table.on('tool(filtertest)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
								var data = obj.data //获得当前行数据
								, layEvent = obj.event; //获得 lay-event 对应的值
								if (layEvent === 'detail') {
									layer.msg('查看操作');
								} else if (layEvent === 'del') {
									layer.confirm('真的删除行么', function(index) {
										
									console.log('del的index:'+index);
										obj.del(); //删除对应行（tr）的DOM结构
										layer.close(index);
										//向服务端发送删除指令
									});
								} else if (layEvent === 'edit') {
									openEdit(data);
								}
							});

							//修改
							function openEdit(data) {
								layer.open({

									type : 1,
									title : '修改视频分类',
									content : $("#type"),
									area : [ '400px', '200px' ],
									offset:"100px",
									success : function(res) {
										form.val("dataFrm", data);
										url = "../type.do?op=update";
									}
									
								
								});

							}
					
							//添加和修改数据的表单事件
							form.on("submit(formDemo1)", function(obj) {
								/* JSON.stringify() */
								console.log(obj.field);
								 $.ajax({
									url,
									data : obj.field,
									type : 'post',
									success : function(res) {
										console.log('res.data:'+res.data);
									
										 if (res.data === 'fail') {
											 layer.msg(res.msg);
						                   } else {
						                       
						                       layer.alert(res.msg, {icon: 6}, function () {
						                           // 获得frame索引
						                           var index = parent.layer.getFrameIndex(window.name);
						                           
						                           //关闭当前frame
						                           parent.layer.close(index);
						                           //修改成功后刷新父界面
						                             window.parent.location.reload(); 	
						                           
						                       });
						                   }
										
									
								}
										 
								});
								 
								return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
							});
							
							function reFresh(){
								//监听提交查询
								
									//表格重载  table.reload('test' //这个test对应的就是table的id
									table.reload('idtest', {
										url : '../type.do',
										where:null
									//设定异步数据接口的额外参数
									//,height: 300
									});
									
								
							};
							
							//监听提交查询
							form.on('submit(formDemo)', function(data) {
								//表格重载  table.reload('test' //这个test对应的就是table的id
										console.log(data.field);
								table.reload('idtest', {
									url : '../type.do',
									where : data.field
								//设定异步数据接口的额外参数
								//,height: 300
								});
								return false;
							});

							//监听复选框事件
							table.on('checkbox(filtertest)', function(obj) {
								console.log(obj.checked); //当前是否选中状态
								console.log(obj.data); //选中行的相关数据
								console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
							});
						});
	</script>
</body>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>

</html>